<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlank.js"></script>
    <script>
        $(function () {
            //获得关键词
            var params = getParams()
            var keyword = decodeURIComponent(params.keyword)
            var type = 0;
            var currentPage = 1;
            var pages = 0;
            var flag = true;
            $("#searchInp").val(keyword)//回显搜索条件
            //全局搜索按钮
            $("#searchBtn").click(function () {
                keyword = $("#searchInp").val()
                if (keyword == null || keyword == "") {
                    $(document).dialog({
                        titleText: '温馨提示',
                        content: '搜索内容不能为空!',
                    });
                } else {
                    window.location.href = "/searchPage.html?keyword=" + keyword + ""
                }
            })
            //查询总条数
            $.get(baseUrl + '/search/selectCount', {keyword: keyword}, function (data) {
                //查总数,根据keyword查询,三张表的总数,
                $("#span-0").html("全部[" + data.count + "]")
                if(data.count==0){//如果都没有数据,则默认选中攻略选项卡
                    $("#strategy").trigger("click")
                }
                $("#span-1").html("攻略[" + data.strategyCount + "]")
                if (data.strategyCount != 0) {
                    $("#strategy").trigger("click")
                }
                $("#span-2").html("游记[" + data.travelCount + "]")
                if (data.travelCount != 0) {
                    $("#travel").trigger("click")
                }
                $("#span-3").html("日报[" + data.dailyCount + "]")
                if (data.dailyCount != 0) {
                    $("#daily").trigger("click")
                }
            });

            //分别查询,根据type的值进行查询,分别查询攻略,游记,日报
            function query() {
                if (flag) {
                    flag = false;
                    $.get(baseUrl + '/search/selectByType', {
                        type: type,
                        keyword: keyword,
                        currentPage: currentPage,
                    }, function (data) {
                        if (type == 1) {
                            if (data.total != 0) {
                                var temp = "";
                                $.each(data.list, function (index, ele) {
                                    temp = temp + "<div><div class=\"container commend\"><a href=\"strategyCatalogs.html?id=" + ele.id + "\"><img src=\'" + ele.coverUrl + "\'><p>" + ele.title + "</p></a></div><hr></div>"
                                })
                                $('#pills-' + type).append(temp);
                            }
                            pages = data.pages;
                        }
                        if (type == 2) {
                            if (data.total != 0) {
                                var temp = "";
                                $.each(data.list, function (index, ele) {
                                    temp = temp + "<div><div class=\"container commend\"><a href=\"travelContent.html?id=" + ele.id + "\"><img src=\'" + ele.coverUrl + "\'><p>" + ele.title + "</p></a></div><hr></div>"
                                })
                                $('#pills-' + type).append(temp);
                            }
                            pages = data.pages;
                        }
                        if (type == 3) {
                            if (data.total != 0) {
                                var temp = "";
                                $.each(data.list, function (index, ele) {
                                    temp = temp + "<div><div class=\"container commend\"><a href=\"dailyContent.html?id=" + ele.id + "\"><img src=\'" + ele.coverUrl + "\'><p>" + ele.title + "</p></a></div><hr></div>"
                                })
                                $('#pills-' + type).append(temp);
                            }
                            pages = data.pages;
                        }
                        flag = true;
                    })
                    currentPage++;
                }
            }

            //点击标签页,查询相应信息并渲染数据
            $('.nav-item[data-id]').click(function () {
                //获得点击的标题id,用以判断标题位置
                type = $(this).data('id');
                $.get(baseUrl + '/search/selectByType', {
                    type: type,
                    keyword: keyword,
                    currentPage: 1,
                }, function (data) {
                    pages = data.pages
                    var temp = "";
                    if (type == 1) {
                        if (data.total != 0) {
                            $.each(data.list, function (index, ele) {
                                temp = temp + "<div><div class=\"container commend\"><a href=\"strategyCatalogs.html?id=" + ele.id + "\"><img src=\'" + ele.coverUrl + "\'><p>" + ele.title + "</p></a></div><hr></div>"
                            })

                            $('#pills-' + type).html(temp);
                        } else {
                            //$('#pills-' + type).html("<img src='a28.jpg' width='100%'><hr><p>为您推荐</p>")
                            $('#pills-' + type).html("<img src='a28.jpg' width='100%'><hr><p>为您推荐</p><a href=\"/strategyCatalogs.html?id=2\"><div class=\"row news-detail\"><div class=\"col-5\"><img src='/upload/e5e8a1a7-b127-4145-9fd0-a94e29f752ba.jpeg'></div> <div class=\"col-7\"> <h4>广州攻略</h4> <span class=\"fl-r\">浏览量:&nbsp;&nbsp;<b style=\"font-size: 15px\";>10688</span> </div> </div> </a>")

                        }
                    }
                    if (type == 2) {
                        if (data.total != 0) {
                            $.each(data.list, function (index, ele) {
                                temp = temp + "<div><div class=\"container commend\"><a href=\"travelContent.html?id=" + ele.id + "\"><img src=\'" + ele.coverUrl + "\'><p>" + ele.title + "</p></a></div><hr></div>"
                            })
                            $('#pills-' + type).html(temp);
                        } else {
                            //$('#pills-' + type).html("<img src='a28.jpg' width='100%'><hr><p>为您推荐</p>")
                            $('#pills-' + type).html("<img src='a28.jpg' width='100%'><hr><p>为您推荐</p><a href=\"/travelContent.html?id=1\"><div class=\"row news-detail\"><div class=\"col-5\"><img src='/upload/aba61437-23b1-41e8-bada-165b7ccc8722.png'></div> <div class=\"col-7\"> <h4>飞到羊城，只为一场最地道的早茶之旅</h4> <span class=\"fl-r\">浏览量:&nbsp;&nbsp;<b style=\"font-size: 15px\";>1068 </span> </div> </div> </a>")

                        }
                    }
                    if (type == 3) {
                        if (data.total != 0) {
                            $.each(data.list, function (index, ele) {
                                temp = temp + "<div><div class=\"container commend\"><a href=\"dailyContent.html?id=" + ele.id + "\"><img src=\'" + ele.coverUrl + "\'><p>" + ele.title + "</p></a></div><hr></div>"
                            })

                            $('#pills-' + type).html(temp);
                        } else {
                            //$('#pills-' + type).html("<img src='a28.jpg' width='100%'><hr><p>为您推荐</p><a href='dailyContent.html?id=1'><img src='http://prqg0dt9l.bkt.clouddn.com/FrTbeBuTrHSH5_yXD5QjY0VLvW7S' width='100%'><p>世界最细腻白沙滩震撼到你！</p></a>")

                            $('#pills-' + type).html("<img src='a28.jpg' width='100%'><hr><p>为您推荐</p><a href=\"/dailyContent.html?id=3\"><div class=\"row news-detail\"><div class=\"col-5\"><img src='http://prqg0dt9l.bkt.clouddn.com/FrTbeBuTrHSH5_yXD5QjY0VLvW7S'></div> <div class=\"col-7\"> <h4>全球最性感的海滩！</h4> <span class=\"fl-r\">浏览量:&nbsp;&nbsp;<b style=\"font-size: 15px\";>588</b>&nbsp;By<b style=\"font-size: 15px;\">骡窝窝官方</b> </span> </div> </div> </a>")
                        }
                    }
                    currentPage = 2;

                })
            });
            //屏幕滚动监听
            $(window).scroll(function () {
                if (($(document).scrollTop() + $(window).height()) >= $(document).height() - 50) {
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到最底部了!',
                            autoClose: 500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
        })


    </script>

</head>

<body>


<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-9">
            <div class="input-group-sm search">
                <input id="searchInp" class="form-control" placeholder="搜索攻略、日记和资讯">
            </div>
        </div>
        <div class="col-1">
            <i class="fa fa-search" id="searchBtn"
               style="color:white;font-size:25px;position: absolute;top: 23%;left: 88%">
            </i>
        </div>


    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item" data-id="1">
        <a class="nav-link " data-toggle="pill" href="#pills-1" id="strategy">
            <span id="span-1"></span>
        </a>
    </li>
    <li class="nav-item" data-id="2">
        <a class="nav-link " data-toggle="pill" href="#pills-2" id="travel">
            <span id="span-2"></span>
        </a>
    </li>
    <li class="nav-item" data-id="3">
        <a class="nav-link " data-toggle="pill" href="#pills-3" id="daily">
            <span id="span-3"></span>
        </a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-1">

    </div>
    <div class="tab-pane fade" id="pills-2">

    </div>
    <div class="tab-pane fade" id="pills-3">

    </div>
</div>
</div>
</body>

</html>
